<template>
  <div>
    <div><h2>报表ID {{ reportId }}</h2><router-link :to="'/definition/edit/' + reportId">修改</router-link></div>
    <div v-if="report.configure">
      <div>
        <h1>参数设置</h1>
        <span v-for="(item, index) in report.configure.parameters">
        <label :for="item.parameterName">{{ item.parameterName }}</label>
        <input v-model="item.parameterValue" :id="item.parameterName">
      </span>
      </div>
      <div>
        <button @click="exec">执行</button>
      </div>
      <div>
        <vxe-table :data="execResult.data" :sort-config="{remote: true, multiple: true}" @sort-change="execSort">
          <vxe-column type="seq" title="Seq" width="60"></vxe-column>
          <vxe-column :field="item" :title="showExecResultHeader(item)" v-for="(item,index) in execResult.schema" sortable>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
  </div>
</template>

<script>

import request from "@/utils/request";
import TableHeaderEdit from "@/components/TableHeaderEdit";

export default {
  name: "Report",
  components: {
    TableHeaderEdit
  },
  mounted() {
    this.load();
  },
  watch: {
    reportId() {
      this.load();
    },
    $route() {
      this.reportId = this.$route.params.id;
    }
  },
  data() {
    return {
      report: {},
      reportId: this.$route.params.id,
      execResult: {},
      sorts: []
    };
  },
  methods: {
    load() {
      request.get("http://localhost:8090/report/" + this.reportId)
          .then((data) => {
            if (data.data.code !== 200) {
              alert(data.data.msg)
            }
            this.report = data.data.data
          })
    },
    showExecResultHeader(column) {
      if (this.report.configure.headerNames) {
        if (this.report.configure.headerNames[column])
          return this.report.configure.headerNames[column].headerName;
      }
      return column;
    },
    buildFilterParameters() {
      const parameters = this.report.configure.parameters;
      return parameters;
    },
    buildExecSort() {
      return this.sorts;
    },
    exec() {
      request.post("http://localhost:8090/report/" + this.reportId, {
        parameters: this.buildFilterParameters(),
        sorts: this.buildExecSort()
      }).then((data) => {
        this.execResult = {};
        if (data.data.code !== 200) {
          alert(data.data.msg)
        }
        this.execResult = data.data.data
      })
    },
    execSort({sortList}) {
      this.sorts = [];
      for (let sort of sortList) {
        this.sorts.push({
          "fieldName": sort.property,
          "orderType": sort.order
        })
      }
      this.exec();
    }
  }
}
</script>

<style scoped>

</style>